<template>
  <div class='container-questions' >
    <el-card style=" margin:20px  ;">
      <!-- 新增按钮 -->
    <div class="header">
       <div style=" font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</div>
       <div>
         <el-button type="success" icon="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button>
       </div>
    </div>
      <!-- 学科 -->
  <div class="middle">
    <el-form inline size="small"  label-width="100px" class="demo-form-inline" :model="questionForm">
        <el-form-item label="学科" >
          <el-select
                placeholder="请选择"
                value=""
                v-model="questionForm.subjectID"
           >
            <el-option v-for="item in dataList" :key="item.value"  :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select
             placeholder="请选择"
              value=""
              v-model="questionForm.catalogID"
              >
            <el-option
           v-for="(item,index) in directoryListing"
                       :key="index"
                       :label="item"
                       :value="item"
           ></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select
            placeholder="请选择"
            value=""
           v-model="questionForm.theTagListList"
            >
            <el-option v-for="(item,index) in theTagLists"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
         <el-input placeholder="根据题干搜索" value="" v-model="questionForm.keyword"></el-input>
        </el-form-item>
  <!-- 第二行 -->
        <el-form-item label="试题类型" >
          <el-select  v-model="questionForm.questionType" placeholder="请选择" value="">
            <el-option v-for="(item,index) in questionType"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select  v-model="questionForm.difficulty" placeholder="请选择" value="">
            <el-option v-for="(item,index) in difficulty"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select  v-model="questionForm.direction" placeholder="请选择" value="">
            <el-option  v-for="(item,index) in direction"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
         <el-select   v-model="questionForm.dataEntryClerk" placeholder="请选择" value="">
            <el-option  v-for="(item,index) in listrs"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
  <!-- 第三行、 -->
       <el-form-item label="题目备注">
         <el-input v-model="questionForm.remarks" value="" ></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="questionForm.theEnterpriseReferredToAs" value="" ></el-input>
        </el-form-item>
        <el-form-item  label="城市"  >
          <el-select
            style="width: 140px;"
            placeholder="请选择"
            value=""
             v-model="questionForm.province"
             @change="handleProvince"
             >
            <el-option v-for="item in citySelect.province"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-select
           style="width: 140px;"
          placeholder="请选择"
           value=""
           v-model="questionForm.city"
           >
            <el-option  v-for="item in  citySelect.cityDate"
                         :key="item"
                         :label="item"
                         :value="item"></el-option>
          </el-select>
        </el-form-item>

          <el-form-item  style="padding-left:100px ;">
            <el-button @click="footerdelete">消除</el-button>
            <el-button type="primary" size="medium" @click="footerget">搜索</el-button>
          </el-form-item>
    </el-form>
  </div>
      <!-- 条数 -->
   <el-alert
    :title="alertText"
    :closable="false"
    show-icon
    style="padding-left:40px ;"
  >
  </el-alert>
      <!-- form表单 -->
    <el-table :data="tableData"  border  style="width: 100%; padding-top:20px ;">
      <el-table-column label="试题编号" prop="number"></el-table-column>
      <el-table-column label="学科" prop="subject"></el-table-column>
      <el-table-column label="目录" prop="catalog"></el-table-column>
      <el-table-column label="题型"  >
        <template #default='{row}' >
          <!-- {{row.questionType}} -->
          <span v-if="row.questionType==='1'" >单选</span>
          <span v-else-if="row.questionType==='2'" >多选</span>
          <span v-else-if="row.questionType==='3'" >简答</span>
        </template>
      </el-table-column>
      <el-table-column label="题干" width="180px" prop="question">
        <template #default='{row}'>
          <span v-html="row.question"></span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" prop="addDate">
         <template #default='{row}'>
         <span>{{row.addDate | parseTimeByString}}</span>
        </template>
      </el-table-column>
      <el-table-column label="难度" prop="">
          <template v-slot="{row}">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else-if="row.difficulty === '3'">困难</span>
          </template>
      </el-table-column>
      <el-table-column label="录入人"   prop="creator"></el-table-column>
      <el-table-column label="操作"  width="200px" v-slot="{row}">
          <el-button icon="el-icon-view" circle type="primary" plain title="查阅" @click="details(row.id)"></el-button>
          <el-button icon="el-icon-edit" circle type="success" plain title="修改" @click="$router.push('/questions/new')"></el-button>
          <el-button icon="el-icon-delete" circle type="danger" plain title="删除" @click="datadelete(row)"></el-button>
          <el-button icon="el-icon-check" circle type="warning" plain title="加入精选" @click="collection(row,'1')" ></el-button>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
  <el-pagination
      class="paginations"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="page.pagesize"
      layout=" prev, pager, next,sizes, jumper"
      :total="page.total"
      style=" padding-top:20px ;"
      background
      >

    </el-pagination>
  </el-card>

   <!-- 对话框 -->
      <el-dialog
         title="题目预览"
        :visible="dialogVisible"
       @close="handleClose">
      <el-row :gutter="20"
              style="padding:10px">
        <el-col :span="6">
          <div>【题型】：
            <span v-if="content.questionType === '1'">单选</span>
            <span v-else-if="content.questionType === '2'">多选</span>
            <span v-else-if="content.questionType === '3'">简答</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>【编号】：{{content.id}}</div>
        </el-col>
        <el-col :span="6">
          <div>【难度】：
            <span v-if="content.difficulty === '1'">简单</span>
            <span v-else-if="content.difficulty === '2'">一般</span>
            <span v-else-if="content.difficulty === '3'">困难</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>【标签】：{{content.tags}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20"
              style="padding:10px">
        <el-col :span="6">
          <div>【学科】：{{content.subjectName}}</div>
        </el-col>
        <el-col :span="6">
          <div>【目录】：{{content.catalogID}}</div>
        </el-col>
        <el-col :span="6">
          <div>【方向】：{{content.direction}}</div>
        </el-col>
      </el-row>
      <hr>
      <!-- 题目 -->
      <div>
        【题干】：
        <div v-html="content.question">{{content.question}}</div>
        <div v-if="content.questionType === '1'">
          <div>选项：（以下选中的选项为正确答案）</div>
          <el-radio-group v-model="radio">
            <el-radio @click.native="detailse"
                      style="padding:10px 0;display:block"
                      :label="option.isRight"
                      v-for="option in content.options"
                      :key="option.code">{{option.title}}</el-radio>
          </el-radio-group>
        </div>
        <div v-else-if="content.questionType === '2'">
          <div>选项：（以下选中的选项为正确答案）</div>
          <el-checkbox-group v-model="checkList">
            <el-checkbox @click.native="detailse"
                         style="padding:10px 0;display:block"
                         :label="option.code"
                         v-for="option in content.options"
                         :key="option.code">{{option.title}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <hr>
      <!--  参考答案-->
      <div>
        <!-- 点击事情答案预览取反 -->
        <div>【参考答案】： <el-button type="danger"
                     @click="isShow=!isShow">视频答案预览</el-button>
        </div>
        <!--   v-show="isShow"  控制视频的显示隐藏 -->
        <video :src="content.videoURL"
               style="width:300px"
               v-if="isShow"
               controls="controls"
               muted
               ></video>

      </div>
      <!-- 分割线 -->
      <hr>
      <!-- 答案解析 -->
      <div>
        【答案解析】：<div v-html="content.answer">{{content.answer}}</div>
      </div>
      <hr>
      <!-- 题目备注 -->
      <div>
        <div>【题目备注】：{{content.remarks}}</div>
      </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleClose">关闭</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
// 学科
import { list, simple } from '@/api/hmmm/subjects.js'
// 题库
import { list as listy, detail, remove, choiceAdd } from '@/api/hmmm/questions.js'
// 枚举
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
// 城市
import { provinces, citys } from '@/api/hmmm/citys.js'
// 用户列表
import { list as lists } from '@/api/base/users.js'
export default {
  name: 'QuestIons',
  data () {
    return {
      alertText: '', // 数据总条数
      dialogVisible: false, // 控制弹层开关
      isShow: false, // 控制视频详解按钮
      radio: 1, // 双向绑定单选框
      isLoading: false, // loding状态
      checkList: [], // 保存多选的选项
      // 弹出层的数据回显
      content: {
        options: [],
        questionType: '', // 题型
        id: '',
        difficulty: '', // 难度
        subjectName: '', // 科目
        catalogID: '', // 目录
        direction: '',
        tags: '',
        question: '',
        answer: '',
        remarks: '',
        videoURL: ''
      },
      dataList: [], // 学科列表数据
      dataTolist: [], // 保存的学科二级目录数据
      tableData: [], // 基础题库数据表格数据
      dataItems: {}, // 二级目录
      directoryListing: [], // 获取目录数据列表数据
      theTagLists: [], // 标签简单数据
      listrs: [], // 录入人
      directions: [], // 方向
      questionType: questionType, // 试题类型映射
      difficulty: difficulty, // 类型映射
      direction: direction, // 类型映射
      // 城市映射
      citySelect: {
        province: [], // 市
        cityDate: [] // 县
      },
      // 表单
      page: {
        page: 1, // 当前页数
        pagesize: 5, // 页面显示条数
        total: 0
      },
      questionForm: {
        subjectID: null, // 否int学科id
        catalogID: null, // 二级目录
        theTagListList: null, // 标签简单数据
        keyword: null, // 关键字
        questionType: null, // 否int题目类型:1(单选),2(多选),3(简答)
        difficulty: null, // 否int题目难度: 1(简单),2(一般),3(困难)
        direction: null, // 方向
        dataEntryClerk: null, // 录入人
        remarks: '', // 题目备注
        theEnterpriseReferredToAs: '', // 企业简称
        province: null, // 城市
        city: null // 县
      }

    }
  },
  created () {
    this.listy() // 请求基础题库数据
    this.getlistHmmm() // 学科列表
    this.getsubjec() // 学科简单列表
    this.getCityData() // 县
    this.lists()
  },
  methods: {
    // 题库的表格数据
    async listy () {
      // 需要搜索的数据参数
      const query = {
        page: this.page.page,
        pagesize: this.page.pagesize,
        subjectID: this.questionForm.subjectID,
        keyword: this.questionForm.keyword
      }
      const { data } = await listy(query)
      // console.log('22', data)
      this.tableData = data.items // 基础题库列表表格数据
      this.page.total = data.counts
      // 数据总条数
      this.alertText = `数据一共 ${data.counts} 条`
    },
    // 学科列表
    async getlistHmmm () {
      const { data } = await list()
      this.dataItems = data.items
      // console.log('1111', this.dataItems)
      this.dataTolist.forEach(item => { this.dataTolist.push(item.subjectName) })

      // console.log(this.dataTolist)
    },
    // 学科简单列表
    async getsubjec () {
      const { data } = await simple()
      // console.log(data)
      this.dataList = data
    },
    //  form表单数据列表

    // 每页条数
    handleSizeChange (val) {
      // console.log(' 每页条数', val)
      this.page.pagesize = val
      this.listy() // 重新渲染表格数据
    },
    // 当前页
    handleCurrentChange (val) {
      // console.log(' 当前页', val)
      this.page.page = val

      this.listy() // 重新渲染表格数据
    },
    // 获取县
    getCityData () {
      this.citySelect.province = provinces()
      // console.log(this.citySelect.province)
    },
    // 获取录入人信息
    async lists () {
      const { data } = await lists()
      // console.log(data)
      data.list.forEach((item) => {
        // console.log(item.username)
        this.listrs.push(item.username)
      })
      // console.log(this.listrs)
    },
    // 选市获取县
    handleProvince (e) {
      // console.log(e)
      this.citySelect.cityDate = citys(e)
      this.questionForm.city = []
    },
    // 消除
    footerdelete () {
      this.questionForm = {
        subjectID: null, // 否int学科id
        catalogID: null, // 二级目录
        theTagListList: null, // 标签简单数据
        keyword: null, // 关键字
        questionType: null, // 否int题目类型:1(单选),2(多选),3(简答)
        difficulty: null, // 否int题目难度: 1(简单),2(一般),3(困难)
        direction: null, // 方向
        dataEntryClerk: null, // 录入人
        remarks: '', // 题目备注
        theEnterpriseReferredToAs: '', // 企业简称
        province: null, // 城市
        city: null // 县
      }
      this.directoryListing = [] // 清空目录数组
      this.theTagLists = [] // 清空标签数组
      this.listy() // 重新渲染
    },
    footerget () {
      this.page.page = 1 // 找到那页
      this.listy()// 重新渲染
    },
    // 点击查阅，打开对话框 // 获取取基础题库信息，回显对话框内容、
    async details (id) {
      this.dialogVisible = true
      // 根据id获取基础题库信息
      // console.log('222', id)
      // 获取取基础题库信息，回显对话框内容、
      const { data } = await detail({ id: id })
      // console.log('111', data)
      this.content = data
      const options = this.content.options
      for (const i in options) {
        console.log('11', options[i]) // i options的下标  options[i]每一项
        if (options[i].isRight === 1) {
          this.checkList.push(options[i].code)
          // console.log(options[i].code)
          // console.log(this.checkList)
        }
      }
    },
    // 预览里面，选项，防止跳转
    detailse (e) {
      // console.log('333', e)
      e.preventDefault()
    },
    // 点击查阅,关闭对话框
    handleClose () {
      this.dialogVisible = false
    },
    // 删除
    datadelete (data) {
      //  是否确认删除
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        type: 'warning',
        iconClass: 'el-icon-info'

      }).then(async () => {
        // 发送请求
        const res = await remove(data)
        // 重新渲染题库
        this.listy()
        console.log(res)
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 加入精品题库
    collection (data, choiceState) {
      // 是否加入精品题库
      this.$confirm('是否继续加入精品题库', '提示', {
        type: 'warning'
      }).then(async () => {
        // 发送请求
        await choiceAdd({ ...data, choiceState })
        // 加入成功，跳转页面
        this.$router.push('/questions/choice')
        // 重新渲染题库
        this.listy()
        this.$message.success('加入成功!')
      }).catch(() => {
        this.$message.info('已取消加入')
      })
    }

  }
}
</script>

<style  lang="scss"  scoped>
.el-form--inline .el-form-item:nth-child(4n) {
  margin-right: 0 !important;
}
.question-container {
  margin: 10px 0;
  padding: 0 10px;
}
.el-card__body{
  position: relative;
}
  .header{
   display: flex;
   justify-content: space-between;

  }
.middle{
  margin-top:15px ;
}
.paginations{
  float:right;
  padding: 10px 120px;
}

</style>
